{% load staticfiles %}

<div class="modal fade" id="table_modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    表格
                </h4>
            </div>

            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <table id="data_table"
                               data-search="true"
                               data-show-export="true"
                               data-show-columns="true"
                               data-toggle="table">
                            <thead>
                            <tr id="data_table_tr">

                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div id="id_table_change_panel" class="alert alert-success alert-dismissable hide">
                        <button type="button" class="close" id="id_table_change_close">
                            ×
                        </button>
                        修改成功
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="id_new_attr" class="btn btn-default">构造字段</button>
                <button id="id_apply_change" class="btn btn-default">应用更改</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="cal_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    表达式
                </h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-10 col-md-offset-1">
                        <input type="text" class="form-control" id="id_expression" required name="name" autofocus>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="id_calc" class="btn btn-default">生成</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var defaultColumns = [];
    $(document).ready(function () {

        $("#id_apply_change").click(function () {
            var json_data = eval(JSON.stringify($('#data_table').bootstrapTable('getData')));
            data_upload.parseJSON(json_data);
            $("#id_table_change_panel").removeClass("hide");
        });
        $("#id_table_change_close").click(function(){
            $("#id_table_change_panel").addClass("hide");
        });
        $("#id_calc").click(function () {
            var exp_origin = $("#id_expression").val().trim();
            var expSplit = exp_origin.split("=");
            if (expSplit.length < 2)
                return;
            var attrName = expSplit[0];
            var expString = expSplit[1];
            if(data_upload.header.indexOf(attrName)!=-1)
                return;
            var cal = calculator();
            var exp = cal.parseExp(expString);
            var newArray = cal.CalcArray(data_upload, exp);
            data_upload.header.push(attrName);
            data_upload.addAttr(newArray.map(function(e){return e.toFixed(3)}));
            refreshTable();
        });
        //TODO:实现构造字段
        $("#id_new_attr").click(function () {
            $("#cal_modal").modal();
        });
        function refreshTable(){
            var $table = $('#data_table');
            defaultColumns = [];
            for (var i = 0; i < data_upload.col_num; i++) {
                defaultColumns.push(data_upload.header[i] == "编码" || data_upload.header[i] == "行政区" ? {
                    field: data_upload.header[i],
                    title: data_upload.header[i],
                    sortable: "true"
                } : {
                    editable: "true",
                    field: data_upload.header[i],
                    title: data_upload.header[i],
                    sortable: "true"
                });
            }
            $('#data_table').bootstrapTable('destroy').bootstrapTable({columns: defaultColumns});
            $table.bootstrapTable('refresh');
            var data_json = data_upload.toJSON();
            $table.bootstrapTable('load', data_json);
            $table.bootstrapTable('togglePagination');
        }
        $('#table_modal').on('shown.bs.modal', function () {
            refreshTable();
        });
    });
</script>